<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-row class="rows1" type="flex" justify="space-between">
          <el-col :span="18" class="left">
            <div class="title">
              <div class="back">
                <span> 返回 </span>
                <h3>订单详情</h3>
              </div>
              <p>
                <span> 订单号: </span>
                <i>JN2222222222</i>
                <span> 当前状态 </span>
                <i class="status"> 排产完成 </i>
              </p>
            </div>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-button type="primary">保存</el-button>
            <el-button type="primary">取消排产</el-button>
            <el-button type="primary">版本确认</el-button>
          </el-col>
        </el-row>
      </div>
      <el-form ref="addFormRef" :model="addForm" inline label-position="top">
        <el-form-item label="排产流水号">
          <el-input v-model="addForm.num" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="外协合同号">
          <el-input v-model="addForm.num" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="优先级">
          <el-input v-model="addForm.num" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="产品大类">
          <el-input v-model="addForm.num" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="产品信息">
          <el-input v-model="addForm.num" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="业务员">
          <el-select v-model="addForm.num" placeholder="请选择">
            <el-option label="" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="业务部门">
          <el-select v-model="addForm.num" placeholder="请选择">
            <el-option label="" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="交期">
          <el-select v-model="addForm.num" placeholder="请选择">
            <el-option label="" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单需求量">
          <el-input v-model="addForm.num" placeholder="请输入" />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix card-title2">
        <h4>排产详情</h4>
        <div class="right">
          <div>
            拆分为
            <el-input-number
              v-model="num"
              :min="0"
              placeholder=""
            />
            批
          </div>
          <el-button type="primary">确定</el-button>
        </div>
      </div>
      <my-table :columns="columns" :data="data">
        <template v-slot:batchDelivery="{ row }">
          <el-input v-model="row.batchDelivery" placeholder="" />
        </template>
        <template v-slot:action="{ row }">
          <el-button
            type="text"
            @click="settingDialogVisible = true"
          >产线工序工时配置</el-button>
          <el-button
            type="text"
            @click="timeDialogVisible = true"
          >除生产其他时间确认</el-button>
        </template>
      </my-table>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <h4>历史版本</h4>
      </div>
      <my-table :columns="historicColumns" :data="historicData">
        <template v-slot:batchDelivery="{ row }">
          <el-input v-model="row.batchDelivery" placeholder="" />
        </template>
        <template v-slot:action="{ row }">
          <el-button
            type="text"
            @click="versionDialogVisible = true"
          >版本详情</el-button>
        </template>
      </my-table>
    </el-card>

    <el-dialog
      title="除生产其他时间确认"
      width="50%"
      :visible.sync="timeDialogVisible"
    >
      <el-form ref="timeFormRef" :model="timeForm" label-width="180px" inline>
        <el-form-item label="海关报关检验时间(天)">
          <span> 1 </span>
        </el-form-item>
        <el-form-item label="海信达检验装柜时间(天)">
          <span> 1 </span>
        </el-form-item>
        <el-form-item label="储运工厂装柜运送时间(天)">
          <span> 1 </span>
        </el-form-item>
        <el-form-item label="储运运送时间(天)">
          <span> 1 </span>
        </el-form-item>
        <el-form-item label="面料到场时间(天)">
          <span> 1 </span>
        </el-form-item>
        <el-form-item label="其他时间(天)">
          <span> 1 </span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose(1)">取 消</el-button>
        <el-button type="primary" @click="onOk(1)">确 定</el-button>
      </span>
    </el-dialog>
    <setting-dialog v-model="settingDialogVisible" type="1" />
    <version-dialog v-model="versionDialogVisible" type="1" />
  </div>
</template>

<script>
import myTable from '@/components/table/myTable'
import settingDialog from './settingDialog.vue'
import versionDialog from './versionDialog.vue'
export default {
  components: { myTable, settingDialog, versionDialog },
  data() {
    return {
      addForm: {},
      num: 5,
      columns: [
        {
          label: '批次序号',
          prop: 'name',
          fixed: true
        },
        {
          label: '批次交期',
          prop: 'batchDelivery'
        },
        {
          label: '批次交期',
          prop: 'batchDelivery'
        },
        {
          label: '批次排产量',
          prop: 'batchDelivery'
        },
        {
          label: '最早上线时间',
          prop: 'batchDelivery'
        },
        {
          label: '最晚上线时间',
          prop: 'endTime'
        },
        {
          label: '最早下线时间',
          prop: 'endTime'
        },
        {
          label: '最晚下线时间',
          prop: 'endTime'
        },
        {
          label: '总时差(天)',
          prop: 'endTime'
        },
        {
          label: '可生产时间(h)',
          prop: 'endTime'
        },
        {
          label: '加班时间(h)',
          prop: 'endTime'
        },
        {
          label: '瓶颈工序',
          prop: 'bottleneckProcess'
        },
        {
          label: '本厂可产量',
          prop: 'endTime'
        },
        {
          label: '实际排产量',
          prop: 'endTime'
        },
        {
          label: '流转数量(件)',
          prop: 'circulationQuantity'
        },
        {
          label: '流转次数(次)',
          prop: 'endTime'
        },
        {
          label: '单次流转制成时间(s)',
          prop: 'endTime'
        },
        {
          label: '订单制成周期',
          prop: 'endTime'
        },
        {
          label: '订单制成天数',
          prop: 'endTime'
        },
        {
          label: '操作',
          prop: 'action',
          slot: 'action',
          fixed: 'right',
          width: '300'
        }
      ],
      data: [],
      historicColumns: [
        {
          label: '版本',
          prop: 'version'
        },
        {
          label: '变更时间',
          prop: 'lastChange'
        },
        {
          label: '变更原因',
          prop: 'comment'
        },
        {
          label: '变更项',
          prop: 'item'
        },
        {
          label: '操作',
          prop: 'action',
          slot: 'action'
        }
      ],
      historicData: [],
      timeDialogVisible: false,
      timeForm: {},
      settingDialogVisible: false,
      versionDialogVisible: false
    }
  },
  created() {},
  mounted() {},
  methods: {
    onClose(val) {
      if (val == 1) {
        this.timeDialogVisible = false
      }
    },
    onOk(val) {
      if (val == 1) {
        this.timeDialogVisible = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../styles/element-variables.scss";
.rows1 {
  align-items: flex-end;
}
.el-card {
  margin-bottom: 20px;
  padding: 0 10px;
}
.left {
  position: relative;
  display: flex;
  align-items: center;
  .title {
    .back {
      display: flex;
      align-items: center;
    }
    h6 {
      display: inline-block;
      margin: unset;
      font-size: 26px;
      margin-left: 10px;
    }
    p {
      margin-top: 15px;
      padding-left: 25px;
      span {
        font-size: 18px;
      }
      i {
        font-size: 18px;
        margin-right: 30px;
      }
      .status {
        font-weight: 800;
        color: $--color-primary;
      }
    }
  }
  .el-button {
    position: absolute;
    right: 0;
  }
}
.card-title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .right {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    div {
      margin-right: 10px;
    }
  }
}
</style>
